<template>
  <div class="container">
    <el-drawer
      v-model="isShow"
      :before-close="close"
      :destroy-on-close="true"
      :with-header="false"
      size="500px"
      ><div id="account-form-container">
        <el-card class="box-card" shadow="never" :body-style="{ border: 0 }">
          <template #header>
            <div class="clearfix">
              <span
                v-text="eventType == 'add' ? '创建学生' : '修改学生'"
              ></span>
            </div>
          </template>
          <div class="studentcrad">
            <el-form
              ref="studentRef"
              :model="student"
              :rules="saveStudentRule"
              label-width="80px"
            >
              <el-form-item label="学生学号" prop="studentNum">
                <el-input
                  v-model="student.studentNum"
                  :disabled="eventType == 'edit'"
                  placeholder="学生学号"
                ></el-input>
              </el-form-item>
              <el-form-item label="学生姓名" prop="studentName">
                <el-input
                  v-model="student.studentName"
                  placeholder="请填写学生姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="studentCardId">
                <el-input
                  v-model="student.studentCardId"
                  placeholder="请填写学生身份证号码"
                ></el-input>
              </el-form-item>
              <el-form-item label="学生性别" prop="studentGender">
                <el-radio-group v-model="student.studentGender">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="所在学院" prop="collegeId">
                <el-select
                  v-model="student.collegeId"
                  placeholder="请选择学生所在学院"
                  @change="collegeChange(student)"
                >
                  <el-option
                    v-for="(item, index) in collageinfo"
                    :key="index"
                    :label="item.collageName"
                    :value="item.collageNum"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所在专业" prop="majarId">
                <el-select
                  v-model="student.majarId"
                  placeholder="请选择学生所在专业"
                  @change="majorChange(student)"
                >
                  <el-option
                    v-for="(item, index) in majors"
                    :key="index"
                    :label="item.majorName"
                    :value="item.majorNum"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所在班级" prop="classId">
                <el-select
                  v-model="student.classId"
                  placeholder="请选择学生所在班级"
                >
                  <el-option
                    v-for="(item, index) in clazz"
                    :key="index"
                    :label="item.className"
                    :value="item.classNum"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="通讯地址" prop="address">
                <el-input type="textarea" v-model="student.address"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onSaveStudent"
                  style="margin-bottom: 30px"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import {
  reactive,
  ref,
  toRefs,
  unref,
  computed,
  watch,
  watchEffect,
} from "vue";
import { UserService, Collageinfo, Major, Student, Clazz } from "@/api/user";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import Code from "@/consts/common";

export default {
  name: "studentDrawer",
  props: {
    eventType: {
      type: String,
      default: "add",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
    editStudentId: {
      type: String,
      default: {},
    },
    drawerClose: {
      type: Function,
    },
  },
  setup(props: any) {
    const studentRef = ref();
    const store = useStore();
    const collageinfo: Collageinfo[] = [];
    const majors: Major[] = [];
    const clazz: Clazz[] = [];
    const student: Student = {};

    let data = reactive({
      student: student,
      collageinfo: collageinfo,
      majors: majors,
      clazz: clazz,
      page: computed(() => store.state.Student.page),
      size: computed(() => store.state.Student.pageSize),
      saveStudentRule: {
        studentNum: [
          { required: true, message: "请输入学生学号", trigger: "blur" },
          {
            pattern: "^[1-9][0-9]{9}$",
            message: "请输入正确的学号",
            trigger: "change",
          },
        ],
        studentName: [
          { required: true, message: "请输入学生姓名", trigger: "blur" },
        ],
        studentCardId: [
          { required: true, message: "请输入学生身份证号码", trigger: "blur" },
          {
            pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确的身份证号码",
            trigger: "change",
          },
        ],
        studentGender: [
          { required: true, message: "请选择性别", trigger: "blur" },
        ],
        collegeId: [{ required: true, message: "请选择学院", trigger: "blur" }],
        majarId: [{ required: true, message: "请选择专业", trigger: "blur" }],
        classId: [{ required: true, message: "请选择班级", trigger: "blur" }],
        address: [
          { required: true, message: "请输入学生通讯地址", trigger: "blur" },
        ],
      },
      close() {
        props.drawerClose();
        data.student = {};
      },

      onSaveStudent() {
        const studentRefq = unref(studentRef);
        if (!studentRefq) return;
        studentRefq.validate((valid: Boolean) => {
          if (valid) {
            UserService.saveStudent(data.student, props.eventType).then(
              (res) => {
                if (res.code == Code.CODE_SUCCESS) {
                  ElMessage({
                    showClose: true,
                    message:
                      props.eventType == "add"
                        ? "创建学生成功"
                        : "编辑学生成功",
                    type: "success",
                  });
                  studentRefq.resetFields();

                  store.dispatch("Student/addAfterLoadUserList", {
                    page: data.page,
                    size: data.size,
                  });
                  if (props.eventType == "edit") {
                    props.drawerClose();
                    data.student = {};
                  }
                }
              }
            );
          }
        });
      },
      collegeChange(student: Student) {
        student.majarId = "";
        student.classId = "";
        getMajors(student.collegeId!);
      },
      majorChange(student: Student) {
        student.classId = "";
        getClass(student.majarId!);
      },
    });
    const getCollageinfo = () => {
      UserService.getCollageinfo().then((res) => {
        if (res.code == Code.CODE_SUCCESS) {
          data.collageinfo = res.data;
        }
      });
    };
    const getMajors = (id: string) => {
      if (id == "") {
        data.majors = [];
        data.clazz = [];
      } else {
        UserService.getCollageinfoById(id).then((res) => {
          if (res.code == Code.CODE_SUCCESS) {
            data.majors = res.data;
          }
        });
      }
    };
    const getClass = (id: string) => {
      if (id == "") {
        data.clazz = [];
      } else {
        UserService.getMajorinfoClass(id).then((res) => {
          if (res.code == Code.CODE_SUCCESS) {
            data.clazz = res.data;
          }
        });
      }
    };
    getCollageinfo();
    watch(
      () => props.isShow,
      (newValue: boolean, oldVlaue) => {
        if (newValue && props.editStudentId != "") {
          UserService.getStudentById(props.editStudentId).then((res) => {
            if (res.code == Code.CODE_SUCCESS) {
              data.student = res.data;
              getMajors(res.data.collegeId!);
              getClass(res.data.majarId!);
            }
          });
        }
      }
    );
    watchEffect(() => {
      if (props.eventType == "add") {
        getCollageinfo();
        data.majors = [];
        data.clazz = [];
      }
    });
    return {
      ...toRefs(data),
      studentRef,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  margin: 0 15px;
  .studentcrad {
    padding: 0 20px 20px 0;
    margin-bottom: 20px;
    height: calc(100vh - 100px);
    overflow-y: auto;
  }
}
</style>

<style lang="less">
#account-form-container {
  .el-card {
    border: none;
  }
}
</style>
